<template>
  <view
    style="background-color: #fff; padding-top: 1upx; padding-bottom: 10rpx"
    class="bd"
  >
    <view class="title">
      <text class="txt">体检名称</text>
    </view>
    <view class="art">
      <p>{{ detail.planName }}</p>
    </view>
    <view class="title">
      <text class="txt">体检内容</text>
    </view>
    <view class="art">
      <p v-html="detail.planRemark"></p>
    </view>
    <!-- 		<view class="title">
			<text class="txt">体检状态</text>
		</view>
		<view class="art">
			<p v-html="detail.planState"></p>
		</view> -->
    <view class="title">
      <text class="txt">体检目的</text>
    </view>
    <view class="art">
      <p v-html="detail.planGoal"></p>
    </view>
    <view style="margin: 80upx 20upx" v-if="state != 1">
      <u-button
        style="background-color: rgb(24, 199, 225); color: rgb(255, 255, 255)"
        @click="goCalendar()"
      >
        预约
      </u-button>
    </view>
    <view style="margin: 80upx 20upx" v-if="state == 1">
      <u-button
        style="background-color: rgb(166, 166, 166); color: rgb(255, 255, 255)"
        disabled
      >
        已预约
      </u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      detail: {},
      state: "",
      isShowTips: false,
      sq: "",
    };
  },
  onLoad(options) {
    this.id = options.planId;
    this.planid = options.planid;
    this.sqname = options.sq;
    this.getReportDetail();
    this.goCalendar2();
    this.getUniIntro();
  },
  onShow() {
    this.getReportDetail();
    this.goCalendar2();
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    getReportDetail() {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .post("/oldInfo/getTjOldInfo", {
          planId: this.planid,
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            self.detail = res.data.data;
            //console.log(res.data)
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    getUniIntro() {
      let self = this;
      this.config.post("/communityInfo/getCommunityDetail", {}).then((res) => {
        if (res.data.code === 200) {
          this.sq = res.data.data.deptName;
          if (uni.getStorageSync("community")) {
            self.uniDetail = JSON.parse(uni.getStorageSync("community"));
          } else {
            self.uniDetail = res.data.data;
            uni.setStorageSync("community", JSON.stringify(res.data.data));
          }
        } else {
          uni.showToast({
            title: self.config.handleError(res.data),
            icon: "none",
          });
        }
      });
    },
    goCalendar() {
      let self = this;
      this.config
        .get("/subscribesInfos/ifCanSub", {
          planType: 7,
        })
        .then((res) => {
          if (res.data.code === 200) {
            if (res.data.data.state == 0 || res.data.data.state == 2) {
              self.state = res.data.data.state;
              uni.navigateTo({
                url:
                  "/pages/main/child/backlog/calendar?type=7&name=老年人预约体检&sq=" +
                  this.sq +
                  "&planid=" +
                  this.planid +
                  "&vPid=" +
                  "",
              });
            } else {
              self.state = res.data.data.state;
              uni.showToast({
                title: "你已预约接种，请勿重复预约",
                icon: "none",
              });
            }
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        });
    },
    goCalendar2() {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/subscribesInfos/ifCanSub", {
          planType: 7,
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            if (res.data.data.state == 0 || res.data.data.state == 2) {
              this.state = 2;
            } else {
              this.state = 1;
            }
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
page {
  height: 100%;
  background-color: #ffffff;
}

.inp-group {
  padding: 0 20upx;
  margin: 30upx 0;

  .inp-title {
    width: 200upx;
  }
}

.title {
  padding: 20upx 50upx;
  background-color: #eee;

  .txt {
    padding: 0 20upx;
    border-left: 8upx solid #18c7e1;
  }
}

.art {
  padding: 30upx 50upx;
  line-height: 46upx;
}

.at {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: space-around;

  p {
    float: left;
    padding: 20rpx;
    background-color: #e5f1f5;
    border-radius: 10rpx;
    color: #005aff;
  }
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  page {
    background-color: #1b1c1e !important;
  }
  .bd {
    background-color: #1b1c1e !important;
    /*  height: calc(100vh - var(--window-top)); */
  }
  .title {
    background-color: #000000 !important;
    color: #ccc !important;
  }
  .bd1 {
    background-color: #38383c !important;
  }
  .art {
    color: #ccc !important;
  }
  >>> span {
    color: #ccc !important;
  }
  .t1 {
    color: #ccc !important;
  }
}
</style>